<template>
  <!-- 新增/编辑菜单 -->
  <el-drawer :title="dialogTitle" v-model="menuParams.visible" @open="handleOpen" size="500"
    :close-on-click-modal="false">
    <div class="drawer-main" v-loading="loading">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="90">
        <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select v-model="formData.parentId" :data="menuParams.menuOptions" check-strictly
            :render-after-expand="false" :props="defaultProps" placeholder="请选择父级菜单" />
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model.trim="formData.name" maxlength="60" clearable placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="formData.type" @change="handleChangeType">
            <el-radio v-for="(value, key, index) in MENU_TYPE" :value="Number(key)" :key="index">{{ value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="路由名称" prop="routeName">
          <el-input v-model.trim="formData.routeName" maxlength="60" clearable placeholder="请输入路由名称" />
        </el-form-item>
        <el-form-item label="路由路径" prop="routePath">
          <el-input v-model.trim="formData.routePath" maxlength="60" clearable placeholder="请输入路由路径" />
        </el-form-item>
        <el-form-item label="重定向" v-if="[1].includes(formData.type)">
          <el-input v-model.trim="formData.redirect" maxlength="60" clearable placeholder="请输入重定向" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component" v-if="[2].includes(formData.type)">
          <el-input v-model.trim="formData.component" maxlength="60" clearable placeholder="请输入组件路径">
            <template #prepend>src/views/</template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio v-for="(value, key, index) in SHOW_TYPE" :value="Number(key)" :key="index">{{ value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" controls-position="right" :min="0" :max="99" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <SelectIcon v-model="formData.icon" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('close')">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { reactive, ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import SelectIcon from '@/components/SelectIcon.vue'
import { addMenu, editMenu } from '@views/menuManage/api/menuManage'
import { MENU_TYPE, SHOW_TYPE } from '@constants/dictionary'
const props = defineProps({
  menuParams: {
    type: Object,
    default: () => { },
    required: true
  }
})

const emit = defineEmits(['close'])
const formData = reactive({ type: 2, status: 1 })
const ruleFormRef = ref(null)
const loading = ref(false)
const defaultProps = { label: 'name', value: 'id' }
const rules = reactive({
  parentId: [{ required: true, message: '请选择父级菜单', trigger: 'change' }],
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  routeName: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
  routePath: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
  component: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})
const dialogTitle = computed(() => ['rootAdd', 'add'].includes(props.menuParams.type) ? '新增菜单' : '编辑菜单')

const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      handleSave()
    } else {
      return false
    }
  })
}
const handleSave = async () => {
  loading.value = true
  const res = formData.id ? await editMenu(formData) : await addMenu(formData)
  loading.value = false
  if (res?.code === 200) {
    ElMessage.success('保存成功')
    emit('close', true)
  }
}

const handleChangeType = () => {
  formData.redirect = ''
  formData.component = ''
}

// 初始化弹窗
const handleOpen = () => {
  nextTick(() => {
    ruleFormRef.value.resetFields()

    let type = props.menuParams.type
    let row = props.menuParams.row
    if (['rootAdd'].includes(type)) {
      formData.id = ''
      return
    }
    if (['add'].includes(type)) {
      formData.id = ''
      formData.parentId = row.id
      return
    }
    if (['edit'].includes(type)) {
      formData.id = row.id
      formData.parentId = row.parentId
      formData.name = row.name
      formData.type = row.type
      formData.redirect = row.redirect
      formData.routeName = row.routeName
      formData.routePath = row.routePath
      formData.component = row.component
      formData.status = row.status
      formData.sort = row.sort
      formData.icon = row.icon
      return
    }
    console.log('初始化')
  })
}

</script>

<style lang="scss" scoped></style>
